{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/login.css' %}">

</head>
<body>
<div class="login">
    <div class="logo">
    </div>
    <form class="layui-form login-form" method="post" action="/login/">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id='message' style="display: none">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <div id="message-box" style=""></div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn login-btn">立即登录</button>
                <a href="/register/" class="layui-btn layui-btn-primary">注册</a>
            </div>
        </div>
    </form>
</div>
</body>
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="{% static 'js/canvas-nest.js' %}"></script>
<script>
    $('.login-btn').click(function (){
        console.log(222)
        let username = $('input[name="username"]').val();
        let password = $('input[name="password"]').val();

        if(username == '' || password == ''){
            $('#message').show();
            $('#message-box').html("用户名、密码不能为空").css({"background-color": "#FFEFFF", "padding": "10px 5px" , "color": "#FF3366"});
            return false;
        }else{
            $('#message').hide();
            location.href='/login/'
        }

    })
</script>
</html>